<template>
  <div class="empInfo">
      <el-row type="flex">
        <el-col :span="3"></el-col>
        <el-col :span="3">
          <div>{{playerInfoFrom.name}} / {{playerInfoFrom.gender}} / {{playerInfoFrom.birthday}}</div>
          <div>{{playerInfoFrom.idNo}}</div>
          <div style="margin-top: 10px;">
            <span>点击更换照片</span>
            <el-upload
              class="upload-demo"
              drag
              action="/person/personDetail"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="beforeAvatarUpload">
              <img v-if="playerInfoFrom.photo" :src="playerInfoFrom.photo" class="avatar">
              <i v-else class="el-icon-upload"></i>
              <div class="el-upload__text">将照片拖到此处<br>或<em>点击上传</em></div>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="6"></el-col>
        <el-col :span="7">
          <el-form inline-message ref="insertFrom" :model="playerInfoFrom" label-width="150px">
            <el-form-item label="教练员">
              <el-select v-model="playerInfoFrom.coachId" filterable clearable style="width: 100%;" placeholder="请选择">
                <el-option :label="item.name" :value="item.coachId" v-for="(item,index) in coachData" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运动主项">
              <el-select v-model="playerInfoFrom.sportId" filterable clearable style="width: 100%;" placeholder="请选择">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_sport" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="集中类型">
              <el-select v-model="playerInfoFrom.focusTypeId" filterable clearable style="width: 100%;" placeholder="请选择">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_focusType" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否重点">
              <el-radio v-model="playerInfoFrom.isImportant" label="1">重点</el-radio>
              <el-radio v-model="playerInfoFrom.isImportant" label="2">非重点</el-radio>
            </el-form-item>
            <el-form-item>
              <el-button type="success" size="small" icon="iconfont icon-save" style="float: right;" @click="save"> 保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="3"></el-col>
      </el-row>
      <div style="width: 100%;text-align: right;">
        <span>当前运动员： </span>
        <el-select v-model="currentPid" filterable size="medium" style="width: 150px;margin-right: 20px;" placeholder="请选择" @change="personChange">
          <el-option :label="item" :value="key" v-for="(item,key,index) in dict_pid_player" :key="index"></el-option>
        </el-select>
        <el-button type="success" :icon="!printLoading?'el-icon-printer':'vxe-icon--refresh roll'" size="medium" @click="printEvent"> 打印</el-button>
      </div>
      <div style="visibility: hidden;overflow: hidden;height: 10px;">
        <playerDetailPrint ref="playerDetailPrint" :detailData="detailData" />
      </div>
  </div>
</template>

<script>
  import { getPlayerRoughly,coach_by_sport,player_info_insert,getDetail,player_select } from '@/api/person.js'
  import { coachByOrgIgnoreRole,sport_by_org,focus_type } from '@/api/dict.js'
  import playerDetailPrint from '@/components/print/playerDetailPrint.vue'
  export default {
    components: {playerDetailPrint},
    props:['pId'],
    data() {
      return {
        dict_gender: {1:'男',2:'女'},
        imageUrl: '',
        imageBase64: '',
        playerInfoFrom: {
          name: '',
          birthday: '',
          genderId: '',
          photo: '',
          coachId: '',
          sportId: '',
          focusTypeId: '',
          isImportant: '',
        },
        dict_sport: {},
        dict_focusType: {},
        coachData: [],
        printTopData: [],
        detailData: {},
        printLoading: false,
        dict_pid_player: {},
        currentPid: ''
      }
    },
    created() {
      this.init_dict().then(()=>{
        this.getPlayerRoughly()
      })
    },
    methods: {
      personChange(val) {
        this.$emit('personChange',val||this.currentPid)
      },
      printEvent() {
        this.printLoading = true
        this.printTopData = ['player_basic','player_detail','family','player_sportResume','player_training','education','player_transport','player_schoolRoll','professionLevel','precis','player_takePartInMatch','cultureResult','monitor']
        let data = {
          pId: this.pId,
          data: {personInfoPrintSpec: this.printTopData.join(',')}
        }
        getDetail(data).then(res=>{
          if(res.code === 200) {
            this.detailData = res.data
            setTimeout(()=>{
              this.$refs.playerDetailPrint.tablePrint()
              this.printLoading = false
            },200)
          }
        })
      },
      coach_by_sport(){
        coach_by_sport({sportId: this.playerInfoFrom.sportId}).then(res=>{
          if(res.code === 200) {
            this.coachData = res.data
          }
        })
      },
      save(){
        let data = {
          name: this.playerInfoFrom.name,
          genderId: this.playerInfoFrom.genderId,
          birthday: this.$moment(this.playerInfoFrom.birthday).format('YYYY-MM-DD')+' 00:00:00',
        }
        if (this.playerInfoFrom.sportId) data.sportId = this.playerInfoFrom.sportId
        if (this.playerInfoFrom.coachId) data.coachId = this.playerInfoFrom.coachId
        if (this.playerInfoFrom.focusTypeId) data.focusTypeId = this.playerInfoFrom.focusTypeId
        if (this.playerInfoFrom.isImportant) data.isImportant = this.playerInfoFrom.isImportant
        if (this.imageBase64) data.photo = this.imageBase64

        player_info_insert({pId:this.pId,data:data}).then(res=>{
          if(res.code === 200) {
            this.$message.success('保存成功！')
            this.$emit('playerCoachMapReload')
          }
        })
      },
      init_dict() {
        return new Promise((resolve,reject)=>{
          this.coach_by_sport()
          sport_by_org().then(res=>{
            this.dict_sport = res
          })
          focus_type().then(res=>{
            this.dict_focusType = res
          })
          player_select().then(res=>{
            if(res.code === 200) {
              let dict = {}
              res.data.forEach(item=>{
                dict[item.pid] = item.name
              })
              this.dict_pid_player = dict
            }else{
              this.dict_pid_player = {}
            }
            this.currentPid = this.pId
            resolve()
          })
        })
      },
      getPlayerRoughly() {
        getPlayerRoughly(this.pId).then(res=>{
          if(res.code === 200) {
            this.playerInfoFrom.name = res.data.name
            this.playerInfoFrom.genderId = res.data.genderId
            this.playerInfoFrom.gender = this.dict_gender[res.data.genderId]
            this.playerInfoFrom.birthday = this.$moment(res.data.birthday).format('YYYY-MM-DD')
            this.playerInfoFrom.photo = res.data.photo
            this.playerInfoFrom.idNo = res.data.idNo
            this.playerInfoFrom.isImportant = res.data.isImportant+''
            this.playerInfoFrom.coachId = res.data.coachId==0?'':res.data.coachId+''
            if(this.dict_sport[res.data.sportId+'']){
              this.playerInfoFrom.sportId = res.data.sportId==0?'': res.data.sportId+''
            }else{
              this.playerInfoFrom.sportId = ''
            }
            this.playerInfoFrom.focusTypeId = res.data.focusTypeId==0?'':res.data.focusTypeId+''
            this.$emit('playerInfoDataPrint',this.playerInfoFrom)
          }
        })
      },
      beforeAvatarUpload(file) {
        const isJPG = file.raw.type === 'image/png' || file.raw.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像只能是jpg/png格式!');
        }else if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }else{
          this.imageUrl = URL.createObjectURL(file.raw);
          this.getBase64(file.raw).then(res=>{
            this.imageBase64 = res
            this.playerInfoFrom.photo = res
          }).then(()=>{
            this.save()
          })
        }
      },
      getBase64(file) {
        return new Promise(function(resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function() {
            imgResult = reader.result;
          };
          reader.onerror = function(error) {
            reject(error);
          };
          reader.onloadend = function() {
            resolve(imgResult);
          };
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .empInfo{

    .upload-demo{
      width: 150px;
      height: 210px;

    }
  }
  .el-upload-dragger{
    width: 150px;
    height: 210px;
  }
</style>
